<template>
	<div class="userbox">
		<div class="title">{{ disabled?this.$t('menu.previewTitleDetail'):this.$t('menu.previewEditTable') }}</div>
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="brandForm" label-width="auto" label-position="right">
				<div class="left-side">
					<el-form-item :label="$t('preview_data.name')" prop="previewVideoName.en_US" >
						<el-input v-model="form.previewVideoName.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="previewVideoName.ja_JP" >
						<el-input v-model="form.previewVideoName.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="previewVideoName.zh_CN" >
						<el-input v-model="form.previewVideoName.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="previewVideoName.zh_TW" >
						<el-input v-model="form.previewVideoName.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('short_data.video.type')" prop="previewVhType">
						<el-select v-model="form.previewVhType" :disabled="disabled">
							<el-option v-for="item in vhTypeList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('preview_data.video')" prop="previewId" >
						<sc-upload-file ref="scuploadfile" v-model="form.previewId" :title="$t('user_data.uploadPage')" :disabled="disabled" :limit=1 :action="previewAction" @removeFile="handleRemovePreview" fileType="previewVideo" type="8" @onSuccess="headCallPreview" :isUploadS3="true"></sc-upload-file>
						<el-popover placement="right" width="400" trigger="click" @hide="hidePopover" @show="showPopover" v-if="form.previewId">
							<div class="contbox" v-if="pform.videoUrl">
								<previewPage :item="pform"></previewPage>
							</div>
							<template #reference>
								<el-button>{{ $t('preview_data.previewDisplay') }}</el-button>
							</template>
						</el-popover>
					</el-form-item>
					<el-form-item :label="$t('preview_data.startTime')" prop="previewStartTime" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.previewStartTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="beforeOptions"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('preview_data.endTime')" prop="previewEndTime" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.previewEndTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="backOptions" :default-time="defaultTime"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('preview_data.author')" prop="creatorId">
						<el-select v-model="form.creatorId" filterable :filter-method="searchCreator" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled" @change="selectCreator">
							<el-option v-for="item in creatorIdList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('preview_data.shortName')" prop="shortId" v-if="form.creatorId">
						<el-select v-model="form.shortId" filterable :filter-method="getShortsList" :disabled="disabled">
							<el-option v-for="item in shortList" :key="item.value" :label="setTitle(item.name)" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('preview_data.shortEpisode')" prop="dramaKey" v-if="form.shortId">
						<el-select v-model="form.dramaKey" filterable :filter-method="getShortsEpisodeList" :disabled="disabled" clearable>
							<el-option v-for="item in shortDramaList" :key="item.value" :label="setTitle(item.name)" :value="item.value" >
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('short_data.form.sort')" prop="sort">
						<el-input type="text" v-model="form.sort" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('preview_data.shortExplore')" prop="available" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-switch v-model="form.available" style="margin-right: 50px" :disabled="disabled" :active-text="$t('preview_data.shortExploreTips1')" :inactive-text="$t('preview_data.shortExploreTips2')"></el-switch>
						</div>
					</el-form-item>

				</div>
				<div class="right-side">
					<el-form-item :label="$t('preview_data.shortIntroduction')" prop="introduction.en_US" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.introduction.en_US" clearable :placeholder="$t('artwork_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="introduction.ja_JP" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.introduction.ja_JP" clearable :placeholder="$t('artwork_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="introduction.zh_CN" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.introduction.zh_CN" clearable :placeholder="$t('artwork_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;" prop="introduction.zh_TW" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.introduction.zh_TW" clearable :placeholder="$t('artwork_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
				</div>
			</el-form>
		</div>
		
		<div id="footer">
			<el-button @click="closeTag">{{$t('components.upload.cancel')}}</el-button>
			<el-button type="primary" v-if="$route.query.type != 'detail'" :loading="isLoading" @click="submit">{{$t('table_data.saveText')}}</el-button>
		</div>
	</div>
</template>

<script>
import  { preview } from '@/mixin/shortPreview'
import previewPage from '@/components/previewPage'
	export default {
		emits: ['success', 'closed'],
		components: {
			previewPage
		},
		mixins: [preview],
		data() {
			return {
				isHls: false,
				pform: {},
				creatorName: '',
				creatorId: '',
				shortId: '',
				iframeSrc: 'https://app-dev.mov.movie/#/explore',
				showPopoverFlag: true,
				isLoading: false,
			}
		},
		watch: {
			'form.creatorId': {
				handler: function (id) {
					if(id) {
						this.creatorId = id;
						this.getShortsList('');
					}
				},
				immediate: true,
				deep: true
			},
			'form.shortId': {
				handler: function (id) {
					if(id) {
						this.shortId = id;
						this.getShortsEpisodeList('');
					}
				},
				immediate: true,
				deep: true
			},
			step: {
				handler: function () {
					
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			setTitle() {
				return function(title) {
					if(title&&this.$i18n.locale)return title[this.$i18n.locale]||title['en_US'];
				}
			},
			icon() {
				// return function(){
					const dUrl = decodeURIComponent(this.form.fileUrl);
					const str = dUrl.split('?')[0].split('.');
					const type = str[str.length-1];
					if(type){
						if(['jpg','jpeg','png','gif','webp','tiff','bmp','heif','svg'].includes(type)){
							return 'sc-icon-img'
						}else if(['mp3','wma','ape'].includes(type)){
							return 'sc-icon-mp3'
						}else if(['mp4','mp5','avi','wmv'].includes(type)){
							return 'sc-icon-video'
						}else if(['pdf','txt','xlsx'].includes(type)){
							return 'sc-icon-pdf'
						}else{
							return 'sc-icon-none'
						}
					}
					return 'sc-icon-none'
				// }
			},
			oicon(){
				return function(e){
					return e
				}
			},
		},
		created(){
			this.disabled = this.$route.query.type=='detail'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.previewTitleDetail'):this.$t('menu.previewEditTable'));
			this.getInfo();
			this.getCreator();

		},
		methods: {
			test() {
				console.log(111111)
			},
			handleRemovePreview() {
				this.isLoading = false;
				this.form.previewId = "";
				this.isHls = false;
			},
			async headCallPreview(res) {
				this.isLoading = false;
				if(!res)return
				this.form.previewId = res;
				this.$message.success(this.$t('banner_data.uploadSuccessText'))
			},
			hidePopover() {
				this.showPopoverFlag = false;
				this.pform = {};
			},
			selectCreator(e) {
				try {
					this.creatorName = this.creatorIdList.find(item => item.value == e).name
				}catch(e){console.warn(e)}
				
			},
			async showPopover() {
				let res = {data: this.form.previewUrl};
				if(!this.isHls) {
						const params = {fileId: this.form.previewId};
						res = await this.$API.preview_short.fetchVideoUrl.get(params);
						if(res.code != "OK" && !res.data)return;
				}
				Object.assign(this.pform, this.form, {videoUrl: res.data, isHls: this.isHls});
				this.showPopoverFlag = true;
			},
			searchCreator(e){
				this.form.shortId = "";
				this.form.dramaKey = "";
				this.getCreator(e);
			},
			async getInfo(){
				if(this.$route.query.id == 'add' || !this.$route.query.id){
					return
				}
				let id = this.$route.query.id;
				const api = this.$API.preview_short.fetchPreviewDetail
				const res = await api.get(id);
				this.form = res.data;
				this.isHls = true;
			},
			async getShortsEpisodeList(name) {
				const params = {
					pageNum: 1,
					pageSize: 10,
					keyword: name,
					shortId: this.shortId
				}
				const res = await this.$API.preview_short.fetchShortsEpisodeList.get(params)
				this.shortDramaList = res.data.list.map(n=>({
					value: n.dramaKey,
					name: n.title
				}))
			},
			async getShortsList(name){
				const params = {
					pageNum: 1,
					pageSize: 10,
					keyword: name,
					creatorId: this.creatorId
				}
				// this.form.dramaKey = '';
				const res = await this.$API.preview_short.fetchShortsList.get(params)
				this.shortList = res.data.list.map(n=>({
					value: n.shortId,
					name: n.title
				}))
			},
			async getCreator(name=''){
				const params = {
					pageNum: 1,
					pageSize: 10,
					status: 1,
					userType: 2,
					keyword: name
				}
				const res = await this.$API.user.searchUser.get(params)
				this.creatorIdList = res.data.list.map(n=>({
					value: n.id,
					name: n.title
				}))
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			//表单提交方法
			submit(){
				console.log(this.form);
				this.$refs.brandForm.validate(async (valid) => {
					if (valid) {
						try {
							this.isLoading = true;
							console.log(this.form);
							this.isSaveing = true;
							let api = this.$API.preview_short.pushFormData;
							const res = await api.post(this.form);
							this.isSaveing = false;
							if(res.code == 'OK'){
								this.isLoading = false;
								this.closeTag();
								this.$message.success(this.$t('table_data.operasucc'))
							}else{
								this.isSaveing = false;
							}

						} catch(e) {
							console.warn(e);
							this.isLoading = false;
							this.isSaveing = false;
						}
					} else {
						this.$message({
							message: this.$t('form_data.uploadIng'),
							type: 'warning'
						});
					}
				})
			},
			beforeOptions(v){
				if(!this.form.previewEndTime)return false
				return v.getTime() >= new Date(this.form.previewEndTime).getTime();//  - 86400000是否包括当天
			},
			backOptions(v){
				return v.getTime() <= new Date(this.form.previewStartTime).getTime();//  - 86400000是否包括当天
			},

		}
	}
</script>

<style scoped>
.scTable {width: 50%;}
.contbox {
	width: 375px;
	height: 750px;
}
.userbox {
	background: #fff;
	padding: 20px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.userbox .title {
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 24px;
}
.grid-content {
	border: 1px solid #eee;
	font-size: 14px;
	min-height: 50px;
	/* line-height: 50px; */
	padding-left: 12px;
	display: flex;
  align-items: center;
}
.bg-purple {
	background: #F6F8F9;
	color: #888;
	display: flex;
  align-items: center;
}
:deep .el-step__head.is-process {
	color: #BB9B51 !important;
	border-color: #BB9B51 !important;
}
:deep .el-step {
	cursor: pointer;
}

.el-col-list {
	flex: 0 0 33.3%;
}
.bg-purple-light {
	color: #000;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.box-card {
	width: 100%
}
:deep .el-upload-list {
	max-height: 150px;
  overflow-y: scroll;
}
:deep .el-transfer {
    width: 80%;
  margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
:deep .el-transfer-panel__filter {
    width: 93%;
}
.chooseCinemabox-title {
    font-size: 20px;
  margin: 0 auto 20px;
}
.chooseCinemabox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 85%; */
    margin: 0 auto 30px;
    font-size: var(--el-form-label-font-size);
}
:deep .el-transfer-panel {
    width: 40%;
}
.scrollbox {
	width: 100%;
	overflow-y: scroll;
	display: flex;
	max-height: 400px;
	flex-wrap: wrap;
}
.scrollbox-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
	margin: 0 10px 10px 0;
}
.sortNuminput {
	display: flex;
}
.scrollbox .uImg {
	width: 200px;
	height: auto;
}
.left-side, .right-side {
	width: 46%;
}
.uploadbtn {
	cursor: pointer;
}
.uploadbtn:hover {
	color: var(--el-color-primary);
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
	width: 100%;
}
.uploadTips {
	margin-left: 10px;
	height: 120px;
	line-height: 200px;
	color: #888;
	font-size: 14px;
}
.del {
	padding-top: 8px;
	font-size: 22px;
	color: red;
	cursor: pointer;
}

.datebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.datebox_left,.datebox_right {
	width: 50%;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	/* height: 200px; */
	width: 100%;
	margin-bottom: 18px;
}
.item-desc {
	/* height: 500px; */
}
.icon {
	width: auto;
  height: 40px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}


@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
